<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
			<u-gap height="1" bgColor="#EDEDED"></u-gap>
			<view class="dropdown" v-if="current==0">
				<view class="" style="width: 30%;" v-if="range.length>0&&range">
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
						<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
						</zb-dropdown-item>
						<!-- <zb-dropdown-item :options="option2" v-model="value2" @change="change2" name="two">
						</zb-dropdown-item> -->
					</zb-dropdown-menu>
				</view>
				<view class="right-with" v-else>
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
						<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
						</zb-dropdown-item>
						<!-- <zb-dropdown-item :options="option2" v-model="value2" @change="change2" name="two">
						</zb-dropdown-item> -->
					</zb-dropdown-menu>
				</view>

				<view class="dropdown-right" v-if="range.length>0&&range">
					<view class="right-txt" @click="onShowDatePicker('range')">
						<text>{{range[0]+ '-' +range[1]}}</text>
						<u-icon v-if="showPicker == false" name="arrow-down" size="13"></u-icon>
						<u-icon v-if="showPicker == true" name="arrow-up" size="13"></u-icon>
					</view>
				</view>
				<view class="dropdown-right right-with" v-else>
					<view class="right-txt" @click="onShowDatePicker('range')">
						<text>时间段筛选</text>
						<u-icon v-if="showPicker == false" name="arrow-down" size="13"></u-icon>
						<u-icon v-if="showPicker == true" name="arrow-up" size="13"></u-icon>
					</view>
				</view>
			</view>
			<view class="dropdown" v-if="current==1">
				<view class="" style="width: 30%;" v-if="range.length>0&&range">
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
						<zb-dropdown-item :options="option3" v-model="value3" @change="change3" name="two">
						</zb-dropdown-item>
					</zb-dropdown-menu>
				</view>
				<view class="right-with" v-else>
					<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(2)" ref="dropdown1" active-color="#0F53AC">
						<zb-dropdown-item :options="option3" v-model="value3" @change="change3" name="two">
						</zb-dropdown-item>
					</zb-dropdown-menu>
				</view>
				<view class="dropdown-right" v-if="range.length>0&&range">
					<view class="right-txt" @click="onShowDatePicker('range')">
						<text>{{range[0]+ '-' +range[1]}}</text>
						<u-icon v-if="showPicker == false" name="arrow-down" size="13"></u-icon>
						<u-icon v-if="showPicker == true" name="arrow-up" size="13"></u-icon>
					</view>
				</view>
				<view class="dropdown-right right-with" v-else>
					<view class="right-txt" @click="onShowDatePicker('range')">
						<text>时间段筛选</text>
						<u-icon v-if="showPicker == false" name="arrow-down" size="13"></u-icon>
						<u-icon v-if="showPicker == true" name="arrow-up" size="13"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="tab-page" v-if="current==0">
			<view class="list-wrapper" v-for="(item,index) in infoList" :key="index">
				<u-gap height="8" bgColor="#f2f2f2" v-if="index > 0"></u-gap>
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							{{item.retrievalType}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">出库数量</view>
							<view class="txt2">{{item.totalAmount}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">备件总价值</view>
							<view class="txt2">{{item.totalMoney}}元</view>
						</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">出库人</view>
							<view class="txt2">{{item.createUserName}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">出库时间</view>
							<view class="txt2">{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view class="item-btn detail-title-border">
					<view class="chuku" @click="togoChukuDetailpage(item,1)">出库详情</view>
					<view class="su-line" v-if="item.orderNum"></view>
					<view class="ruku" v-if="item.orderNum" @click="OrderNumDetailpage(item,1)">单号详情</view>
				</view>
			</view>
			<view class="bottom-subside" v-if="total<6"></view>
			<u-loadmore v-if="total>5" :status="status" :line="true" height="200rpx" />
			<view class="empty-data" v-if="infoList.length==0">
				<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
			</view>
		</view>
		<view class="tab-page" v-if="current==1">
			<view class="list-wrapper" v-for="(item,index) in rukuList" :key="index">
				<u-gap height="8" bgColor="#f2f2f2" v-if="index > 0"></u-gap>
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							{{item.warehouseType}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">入库数量</view>
							<view class="txt2">{{item.totalAmount}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">备件总价值</view>
							<view class="txt2">{{item.totalMoney}}元</view>
						</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">入库人</view>
							<view class="txt2">{{item.createUserName}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">入库时间</view>
							<view class="txt2">{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view class="item-btn detail-title-border">
					<view class="chuku" @click="togoChukuDetailpage(item,2)">入库详情</view>
					<view class="su-line" v-if="item.orderNum"></view>
					<view class="ruku" v-if="item.orderNum" @click="OrderNumDetailpage(item,2)">单号详情</view>
				</view>

			</view>
			<view class="bottom-subside" v-if="total2<6"></view>
			<u-loadmore v-if="total2>5" :status="status2" :line="true" height="200rpx" />
			<view class="empty-data" v-if="rukuList.length==0">
				<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
			</view>
		</view>
		<mxdatePicker :show="showPicker" :type="type" :value="timeValue" :show-tips="true" :begin-text="'开始'"
			 :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import mxdatePicker from '../components/mx-datePicker/index.vue';
	export default {
		components: {
			mxdatePicker
		},
		data() {
			return {
				showPicker: false,
				range: [],
				type: 'range',
				timeValue: '',
				status: 'loadmore',
				status2: 'loadmore',
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '出库记录',
				}, {
					name: '入库记录',
				}],
				option: [{
					text: '出库类型',
					value: ''
				}],
				value1: '',
				option2: [{
						text: '全部',
						value: ''
					},
					{
						text: '2022-01-01~2022-01-01',
						value: 1
					},
					{
						text: '2023-01-01',
						value: 2
					}
				],
				value2: '',
				option3: [{
					text: '入库类型',
					value: ''
				}],
				value3: '',
				params: {
					retrievalType: '',
					pn: 1,
					ps: 5,
					keyword: '',
					startTime: '',
					endTime: ''
				},
				infoList: [],
				pages: 1,
				total: 0,
				params2: {
					warehouseType: '',
					pn: 1,
					ps: 5,
					keyword: '',
					startTime: '',
					endTime: ''
				},
				rukuList: [],
				pages2: 1,
				total2: 0,
			}
		},
		onLoad() {
			this.getList();
			this.getRetrievaltypelist();
			this.getWarehouseTypelist();
		},
		methods: {
			onShowDatePicker(type) { //显示
				console.log(JSON.stringify(type))
				this.type = type;
				this.showPicker = true;
				this.timeValue = this[type];

			},
			onSelected(e, type) { //选择
				console.log(JSON.stringify(e))
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					if (this.current == 0) {
						this.params.startTime = e.value[0].replace(/\//g, '-')
						this.params.endTime = e.value[1].replace(/\//g, '-')
						this.infoList = []
						this.getList()
					} else if (this.current == 1) {
						this.rukuList = []
						this.params2.startTime = e.value[0].replace(/\//g, '-')
						this.params2.endTime = e.value[1].replace(/\//g, '-')
						this.getrukuList()
					}
				} else {

					if (this.current == 0) {
						this.params.startTime = ''
						this.params.endTime = ''
						this.infoList = []
						this.range = []
						this.getList()
					} else if (this.current == 1) {
						this.rukuList = []
						this.range = []
						this.params2.startTime = ''
						this.params2.endTime = ''
						this.getrukuList()
					}
				}
			},
			getWarehouseTypelist() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'warehouse_type'
				}).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								let dd = {
									text: item.configValue,
									value: item.id
								}
								this.option3.push(dd);
							})
						}
					}
				}).catch(err => {})
			},
			getRetrievaltypelist() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'retrieval_type'
				}).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								let dd = {
									text: item.configValue,
									value: item.id
								}
								this.option.push(dd);
							})
						}
					}
				}).catch(err => {})
			},
			//出库
			getList() {
				uni.$u.http.post(`/device/mobile/devicePartRetrieval/pageList`, this.params).then(res => {
					if (res.code == 0) {
						this.infoList = this.infoList.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			},
			//入库
			getrukuList() {
				uni.$u.http.post(`/device/mobile/devicePartWarehouse/pageList`, this.params2).then(res => {
					if (res.code == 0) {
						this.rukuList = this.rukuList.concat(res.data.records);
						this.pages2 = res.data.pages;
						this.total2 = res.data.total;
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				console.log('选择', e)
				this.showPicker = false
				this.range = [];
				this.current = e.index;
				if (this.current == 0) {
					this.infoList = []
					this.params.pn = 1;
					this.getList();
				}
				if (this.current == 1) {
					this.rukuList = []
					this.params2.pn = 1;
					this.getrukuList()
				}
			},

			toggleItem(val) {
				if (val === 1) {
					this.$refs.dropdown1.close()
				}
			},
			change1(val) {
				console.log('===========', val, this.value1)
				this.infoList = []
				this.params.pn = 1;
				if (val.text == '出库类型') {
					this.params.retrievalType = ''
				} else {
					this.params.retrievalType = val.text;
				}
				this.getList();
			},
			change2(val) {
				console.log('===========', val, this.value2)
			},
			change3(val) {
				console.log('===========', val, this.value3)
				this.rukuList = []
				this.params2.pn = 1;
				if (val.text == '入库类型') {
					this.params2.warehouseType = ''
				} else {
					this.params2.warehouseType = val.text;
				}

				this.getrukuList()
			},
			closeRepair() {
				uni.navigateTo({
					url: '/pages/subPackagesB/weiwaiRepair/closerepair'
				})
			},
			togoRepairpage() {
				uni.$u.toast('功能正在开发中...')
			},
			//出入库详情
			togoChukuDetailpage(item, type) {
				if (type == 1) { //出库
					uni.navigateTo({
						url: '/pages/subPackagesB/stockList/chukuDetail?chukuId=' + item.id
					})
				}
				if (type == 2) { //入库
					uni.navigateTo({
						url: '/pages/subPackagesB/stockList/rukuDetail?chukuId=' + item.id
					})
				}
			},
			//单号详情
			OrderNumDetailpage(item, type) {
				if (type == 1) {
					if (item.retrievalType == '维修出库') {
						uni.navigateTo({
							url: '/pages/subPackagesA/repairList/wxDetail?orderNum=' + item.orderNum +
								'&repairId=' + item.id + "&type=repair"
						})
					}
					if (item.retrievalType == '维保出库') {
						uni.navigateTo({
							url: '/pages/subPackagesB/weibaoTask/weibaoDetail?orderNum=' + item.orderNum
						})
					}
					if (item.retrievalType == '点检出库') {
						uni.navigateTo({
							url: '/pages/subPackagesB/checkupTask/checkDetail?orderNum=' + item.orderNum
						})
					}
				}
				if (type == 2) {
					if (item.warehouseType == '维修退还入库') {
						uni.navigateTo({
							url: '/pages/subPackagesA/repairList/wxDetail?orderNum=' + item.orderNum +
								'&repairId=' + item.id + "&type=repair"
						})
					}
					if (item.warehouseType == '维保退还入库') {
						uni.navigateTo({
							url: '/pages/subPackagesB/weibaoTask/weibaoDetail?orderNum=' + item.orderNum
						})
					}
					if (item.warehouseType == '点检退还入库') {
						uni.navigateTo({
							url: '/pages/subPackagesB/checkupTask/checkDetail?orderNum=' + item.orderNum
						})
					}
				}


			}
		},
		onReachBottom() {
			if (this.current == 0) {
				if (this.params.pn >= this.pages) return;
				this.status = 'loading';
				this.params.pn = ++this.params.pn;
				setTimeout(() => {
					this.getList()
					if (this.params.pn >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			}
			if (this.current == 1) {
				if (this.params2.pn >= this.pages2) return;
				this.status2 = 'loading';
				this.params2.pn = ++this.params2.pn;
				setTimeout(() => {
					this.getrukuList()
					if (this.params2.pn >= this.pages2) this.status2 = 'nomore';
					else this.status2 = 'loading';
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	page {

		background: #ffffff;

	}

	.tab-page {
		// margin-top: 2rpx;
	}

	.dropdown {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.list2 {
			.sort {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #000000;
				padding: 20rpx 0;
			}
		}

		.sort-list {
			width: 100%;
			height: 100vh;
			background: #9d9d9d;
			z-index: 22;
			position: absolute;

			.sort-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 40rpx 10rpx 20rpx;
				font-size: 34rpx;
				border-bottom: 1px solid #f2f2f2;
				z-index: 99;
				position: relative;
				background: #fff;
			}

			.sort-item:last-child {
				border-bottom: none;
			}

			.sort-item:first-child {
				border-top: 1px solid #f2f2f2;
			}
		}

		.dropdown-right {
			width: 70%;
			text-align: center;

			.right-txt {
				color: #8c8c8c;
				display: flex;
				justify-content: center;
			}
		}

		.right-with {
			width: 50%;
		}
	}

	.list-wrapper {
		.list-info {
			// margin-top: 10rpx;
			background: #fff;
			padding: 30rpx;

			.list-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #2B2B2B;
					font-weight: 500;

					.copy {
						color: rgba(166, 166, 166, 1);
						font-size: 20rpx;
						margin-left: 10rpx;
						border-radius: 8rpx;
						background: rgba(166, 166, 166, 0.3);
						padding: 4px 6px 4px 6px;
					}
				}

				.title-right {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					font-size: 24rpx;
					padding: 0 20rpx;
				}

				.title-ongoing {
					color: rgba(2, 173, 130, 1);
					background: rgba(2, 173, 130, 0.2);
				}

				.title-dyz {
					color: rgba(15, 83, 172, 1);
					background-color: rgba(15, 83, 172, 0.2);
				}

				.title-close {
					color: rgba(237, 118, 21, 1);
					background-color: rgba(252, 119, 10, 0.2);
				}

				.title-finish {
					color: rgba(2, 173, 130, 1);
					background-color: rgba(2, 173, 130, 0.2);
				}
			}

		}

		.list-main {
			padding: 4rpx 10rpx 20rpx 10rpx;
			background: #fff;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;

			.item-main {
				display: flex;
				justify-content: space-between;
				padding: 4rpx 30rpx;

				.main-left {
					width: 50%;
					text-align: left;

					.txt1 {
						color: #8c8c8c;
						font-size: 30rpx;
						padding: 10rpx 0;
					}

					.txt2 {
						color: #4D4D4D;
						font-size: 32rpx;
					}
				}
			}


		}

		.item-btn {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 25rpx 0;
			background: #fff;

			.chuku {
				width: 45%;
				font-size: 34rpx;
				color: #8c8c8c;
				text-align: center;
			}

			.ruku {
				width: 45%;
				font-size: 34rpx;
				color: #0F53AC;
				text-align: center;
			}

			.su-line {
				width: 2rpx;
				height: 50rpx;
				background: #f2f2f2;
			}
		}
	}
	.bottom-subside {
		width: 100%;
		height: 44rpx;
	}
	.u-empty .u-icon {
		z-index: -1;
	}

	.u-tabs__wrapper__nav__item {
		// padding: 0 !important;
		width: 50%;
	}
</style>